<template>
  <div class="commentInfo" v-if="Object.keys(commentInfo).length !== 0 ">
    <div class="header">
      <div>用户评价</div>
      <div>等多</div>
    </div>
    <div class="user">
      <img :src="commentInfo.user.avatar" alt="">
      <span>{{commentInfo.user.uname}}</span>
    </div>
    <div class="comment">
      {{commentInfo.content}}
    </div>
    <div class="other-info">
      <span>{{commentInfo.created | dateFormat}}</span>
      <span>{{commentInfo.style}}</span>
    </div>
    <div class="images">
      <img :src="item" alt="item" v-for="(item,index) in commentInfo.images" :key="index">
    </div>
  </div>
</template>

<script>
  import {dateFormat} from 'common/utils.js'
  export default {
    props:{
      name:"commentInfo",
      commentInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    filters:{
      dateFormat(value){
        // 事件戳是秒 需要转为毫秒*1000
        let date = new Date(value*1000)
        return dateFormat(date)
      }
    }
  }
</script>

<style scoped>
  .commentInfo{
    padding:30px 15px;
    border-bottom:5px solid #f2f5f8;
  }
  .header{
    display:flex;
    justify-content:space-between;
    padding-bottom:15px;
    border-bottom:1px solid #f2f5f8;
    font-size:14px;
  }
  .user{
    margin: 15px 0;
  }
  .user img{
    width:42px;
    height:42px;
    border-radius:50%;
    vertical-align:middle;
  }
  .user span{
    margin-left:8px;
    color:#666;
    font-size:16px;
    vertical-align: middle;
  }
  .comment{
    text-indent: 2em;
    line-height: 1.5em;
    font-size:14px;
  }
  .other-info{
    margin-top:10px;
    color:#666;
    font-size: 14px;
  }
  .other-info span:nth-child(2){
    margin-left:10px;
  }
  .images{
    margin-top: 10px;
    display:flex;
    justify-content:start;
  }
  .images img{
    max-width:30%;
    margin-right:5%;
  }
</style>
